<template>
  <div class="account-manager">
    <!-- 搜索表单 -->
    <div class="search-form">
      <div class="form-group">
        <label>登录KEY:</label>
        <input type="text" v-model="searchForm.key" placeholder="请输入登录KEY">
      </div>
      <div class="form-group">
        <label>账号:</label>
        <input type="text" v-model="searchForm.account" placeholder="请输入账号">
      </div>
      <div class="form-group">
        <label>登录IP:</label>
        <input type="text" v-model="searchForm.loginIp" placeholder="请输入登录IP">
      </div>
      <div class="form-group">
        <label>密码类型:</label>
        <select v-model="searchForm.passwordType">
          <option value="">请选择密码类型</option>
          <option value="虚拟机">虚拟机</option>
          <option value="本地">本地</option>
          <option value="远程">远程</option>
        </select>
      </div>
      <div class="form-group">
        <label>备注:</label>
        <input type="text" v-model="searchForm.remark" placeholder="请输入备注">
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="operation-buttons">
      <button class="btn btn-add" @click="openModal">添加</button>
      <button class="btn btn-edit">编辑</button>
      <button class="btn btn-delete">删除</button>
      <button class="btn btn-search">查询</button>
    </div>

    <!-- 数据表格 -->
    <table class="data-table">
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAll" @change="handleSelectAll"></th>
          <th>销售登录key</th>
          <th>账号</th>
          <th>密码</th>
          <th>密码类型</th>
          <th>登录ip</th>
          <th>开始时间</th>
          <th>过期时间</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in accounts" :key="item.key">
          <td><input type="checkbox" v-model="item.selected"></td>
          <td>{{ item.key }}</td>
          <td>{{ item.account }}</td>
          <td>{{ item.password }}</td>
          <td>{{ item.passwordType }}</td>
          <td>{{ item.loginIp }}</td>
          <td>{{ item.createTime }}</td>
          <td>{{ item.expireTime }}</td>
          <td>{{ item.remark }}</td>
        </tr>
      </tbody>
    </table>

    <!-- 添加模态框 -->
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <h2>添加账号</h2>
        <div class="modal-form">
          <div class="form-item">
            <label>销售登录key:</label>
            <input type="text" v-model="formData.key" placeholder="请输入登录key">
          </div>
          <div class="form-item">
            <label>账号:</label>
            <input type="text" v-model="formData.account" placeholder="请输入账号">
          </div>
          <div class="form-item">
            <label>密码:</label>
            <input type="password" v-model="formData.password" placeholder="请输入密码">
          </div>
          <div class="form-item">
            <label>密码类型:</label>
            <select v-model="formData.passwordType">
              <option value="虚拟机">虚拟机</option>
              <option value="本地">本地</option>
              <option value="远程">远程</option>
            </select>
          </div>
          <div class="form-item">
            <label>登录IP:</label>
            <input type="text" v-model="formData.loginIp" placeholder="请输入登录IP">
          </div>
          <div class="form-item">
            <label>备注:</label>
            <input type="text" v-model="formData.remark" placeholder="请输入备注">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-cancel" @click="closeModal">取消</button>
          <button class="btn btn-save" @click="saveData">保存</button>
        </div>
      </div>
    </div>

    <!-- 成功提示框 -->
    <div class="alert-success" v-if="showSuccess">
      <div class="alert-content">
        <p>保存成功！</p>
        <button class="btn" @click="closeSuccess">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import accountData from '../data/accountList.json';

const accounts = ref(accountData.accounts);
const selectAll = ref(false);

const searchForm = reactive({
  key: '',
  account: '',
  loginIp: '',
  passwordType: '',
  remark: ''
});

const showModal = ref(false);
const showSuccess = ref(false);

// 表单数据
const formData = reactive({
  key: '',
  account: '',
  password: '',
  passwordType: '虚拟机',
  loginIp: '',
  remark: '',
  createTime: '',
  expireTime: ''
});

const handleSelectAll = () => {
  accounts.value.forEach(item => {
    item.selected = selectAll.value;
  });
};

// 打开模态框
const openModal = () => {
  showModal.value = true;
  // 重置表单数据
  Object.keys(formData).forEach(key => {
    formData[key] = '';
  });
  formData.passwordType = '虚拟机';
};

// 关闭模态框
const closeModal = () => {
  showModal.value = false;
};

// 保存数据
const saveData = () => {
  // 生成当前时间（只保留日期）
  const now = new Date();
  const createTime = now.toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit'
  }).replace(/\//g, '/');
  
  // 生成过期时间（90天后，只保留日期）
  const expireDate = new Date(now.getTime() + (90 * 24 * 60 * 60 * 1000));
  const expireTime = expireDate.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '/');

  // 创建新数据
  const newData = {
    ...formData,
    createTime,
    expireTime
  };

  // 添加到数据列表
  accounts.value.push(newData);
  
  // 关闭模态框
  closeModal();
  
  // 显示成功提示
  showSuccess.value = true;
};

// 关闭成功提示
const closeSuccess = () => {
  showSuccess.value = false;
};
</script>

<style scoped>
.account-manager {
  padding: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  align-items: center;
}

.form-group label {
  margin-right: 8px;
  white-space: nowrap;
}

.form-group input {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.operation-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-add { background-color: #007bff; color: white; }
.btn-edit { background-color: #28a745; color: white; }
.btn-delete { background-color: #dc3545; color: white; }
.btn-export { background-color: #17a2b8; color: white; }
.btn-import { background-color: #6c757d; color: white; }
.btn-search { background-color: #007bff; color: white; }

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.data-table tr:hover {
  background-color: #f5f5f5;
}

input[type="checkbox"] {
  cursor: pointer;
}

/* 添加下拉框样式 */
select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  min-width: 120px;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
}

.modal-form {
  margin: 20px 0;
}

.form-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.form-item label {
  width: 100px;
  text-align: right;
  margin-right: 10px;
}

.form-item input,
.form-item select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-save {
  background-color: #28a745;
  color: white;
}

.btn-cancel {
  background-color: #6c757d;
  color: white;
}

/* 成功提示框样式 */
.alert-success {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.alert-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.alert-content p {
  margin-bottom: 15px;
  font-size: 16px;
}
</style>